<template>
  <el-drawer :model-value="visible" title="房间详情" :size="mobile ? '100%' : 600" lock-scroll class="body-pd-clear" @close="handleClose">
    <el-tabs
      v-model="tabsType"
      type="card"
    >
      <el-tab-pane label="房源信息" name="roomSource">
        <RoomSource v-if="roomSourceVisible" :room-info="roomInfo" />
      </el-tab-pane>
<!--      <el-tab-pane label="开门记录" name="openDoorRecord">-->
<!--        <OpenDoorRecord />-->
<!--      </el-tab-pane>-->
      <el-tab-pane label="入住记录" name="checkInRecord">
        <CheckInRecord v-if="roomInfo.roomId" :room-info="roomInfo" />
      </el-tab-pane>
      <el-tab-pane label="充值记录" name="rechargeRecord">
        <RechargeRecord />
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script setup name="RoomDetail">
import useAppStore from '@/store/modules/app'
import RoomSource from './roomSource.vue'
import OpenDoorRecord from './openDoorRecord.vue'
import CheckInRecord from './checkInRecord.vue'
import RechargeRecord from './rechargeRecord.vue'
import RoomApi from '@/api/room/room'


const tabsType = ref('roomSource')
const roomInfo = ref({})
const roomSourceVisible = ref(false)

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  roomId: {
    type: [Number, String],
    default: ''
  },
  buildingName: {
    type: String,
    default: ''
  },
  chamberName: {
    type: String,
    default: ''
  }
})

const mobile = computed(() => useAppStore().device === 'mobile')

/* 获取房间信息 */
function getRoomInfo() {
  console.log(props.roomId)
  console.log(props)
  if (!props.roomId || props.roomId === '') {
    return
  }
  RoomApi.getDetail(props.roomId).then(res => {
    const data = res.data
    data.buildingName = props.buildingName
    data.chamberName = data.name
    roomInfo.value = data
    roomSourceVisible.value = true
  })
}

function handleClose() {
  emit('cancel')
}

getRoomInfo()
</script>

